<template>
  <el-card style="margin-bottom: 30px;">
    <div class="top">
      <!-- 选择框 -->
      <el-select v-model="courseId" filterable clearable placeholder="课程" @change="getTeachers">
        <el-option v-for="item in courseOptions" :key="item.subId" :label="item.subName" :value="item.subId" />
      </el-select>

      <el-select v-model="teacherId" filterable clearable placeholder="教师" :disabled="!courseId">
        <el-option
          v-for="item in teachersOptions"
          :key="item.teacherId"
          :label="item.teacherName"
          :value="item.teacherId"
        />
      </el-select>

      <el-select v-model="semester" clearable placeholder="学期" :disabled="!courseId">
        <el-option v-for="item in semesters" :key="item" :label="item" :value="item" />
      </el-select>

      <el-select v-show="quantileShow" v-model="quantile" placeholder="分位数" size="large">
        <el-option v-for="item in quantiles" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-button type="primary" round @click="analyse">开始分析</el-button>
    </div>
  </el-card>
</template>

<script>
import { getTeacherList, getCourseList, getSemesterList } from '@/api/grades'
import { Message } from 'element-ui'
export default {
  name: 'Top',
  // eslint-disable-next-line vue/require-prop-types
  props: ['show', 'signal', 'quantileShow'],
  data() {
    return {
      // 课程id
      courseId: '',
      // 老师id
      teacherId: null,
      // 课程选项
      courseOptions: [],
      // 老师选项
      teachersOptions: [],
      // 学期
      semester: null,
      semesters: [],
      quantile: 0.27,
      quantiles: [{
        label: '27/73分位数',
        value: 0.27
      }, {
        label: '25/75分位数',
        value: 0.25
      }]
    }
  },
  mounted() {
    this.getCourses()
    this.getSemesters()
  },
  methods: {
    clear() {
      this.teacherId = null
      this.semester = null
    },
    // 获取老师
    getTeachers(courseId) {
      this.clear()
      if (courseId === null || courseId === '') {
        return
      }
      // 隐藏分析结果展示的部分
      this.show(false)
      this.courseId = courseId
      // 查询该课程的教师ID
      getTeacherList(courseId).then(response => {
        this.teachersOptions = response.data
      })
      this.getSemesters()
    },
    // 获取课程
    getCourses() {
      getCourseList().then(response => {
        this.courseOptions = response.data
      })
    },
    // 获取学期
    getSemesters() {
      getSemesterList(this.courseId, this.teacherId).then(response => {
        this.semesters = response.data
      })
    },
    // 发送分析请求信息
    analyse() {
      if (this.courseId === null || this.semester === null) {
        Message({
          message: '请选择参数',
          type: 'warning',
          duration: 2000
        })
        this.show(false)
        return
      }
      this.signal({ courseId: this.courseId, teacherId: this.teacherId, semester: this.semester, quantile: this.quantile })
    }
  }
}
</script>

<style lang="scss">
.top {
  display: flex;
  gap: 30px;
}
</style>
